<template>
  <div class="left-side">
    <div class="header">
      <el-row type="flex" align="middle" class="info">
        <edu-avatar :size="64" :src="userInfo.avatar_url" @click="goUser(userInfo.id)"></edu-avatar>
        <el-row type="flex" align="middle" class="name" @click.native="goUser(userInfo.id)">
          {{ userInfo.nick_name }}
          <i
            v-if="account_info.vip_status"
            :class="
              account_info.vip_status == 1
                ? 'icon-vip'
                : account_info.vip_status == 2
                ? 'icon-vipover'
                : ''
            "
          ></i>
        </el-row>
      </el-row>
      <el-row type="flex" align="middle" justify="space-around" class="bottom">
        <div class="inte">积分：{{ credit }}</div>
        <el-button
          class="sign-btn"
          type="primary"
          size="mini"
          @click="handleSign"
          :disabled="signin_state === 1"
        >
          {{ signin_state === 1 ? '已签到' : '签到' }}
        </el-button>
      </el-row>
    </div>
    <div class="menu">
      <el-scrollbar>
        <el-menu class="munu-nav" :default-active="tabValue" unique-opened>
          <el-submenu :index="item.key" v-for="(item, i) in list" :key="i">
            <template slot="title">
              <i class="edu-icon--left" :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
              :index="vo.key"
              v-for="(vo, j) in item.children"
              :key="j"
              @click="mySwitch(vo.name)"
              >{{ vo.title }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { routeName } from '@/router/modules/my'
import { mapState } from 'vuex'
export default {
  props: {
    menuList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      openeds: []
    }
  },
  computed: {
    ...mapState({
      credit: state => state.my_integral.credit,
      signin_state: state => state.my_integral.signin_state,
      account_info: state => state.my.account_info,
      userInfo: state => state.user.info
    }),
    tabValue() {
      return this.$route.meta.key
    },
    list() {
      return this.routerGenerator(this.menuList)
    }
  },
  methods: {
    mySwitch(name) {
      this.$router.push({
        name: name
      })
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    },
    // 签到
    handleSign() {
      this.$api.createCreditSignIn(res => {
        const { data } = res
        this.$message.success(res.msg)
        this.$store.dispatch('my_integral/SET_INTEGRAL_INIT', {
          count: data.credit || 0,
          state: data.today_punch_in
        })
      })
    },
    routerGenerator(routerMap, parent) {
      return routerMap.map(item => {
        let name = parent && parent.name
        const currentRouter = {
          key: item.group_key || item.key,
          name: `${name ? '' : routeName + '_'}${name ? name + '_' : ''}${item.group_key ||
            item.key}`,
          title: item.group_title || item.title,
          icon: this.constantRouterIcon(item.group_key || item.key)
        }
        // 是否有子菜单，并递归处理
        if (item.list && item.list.length > 0) {
          currentRouter.children = this.routerGenerator(item.list, currentRouter)
        }
        return currentRouter
      })
    },
    constantRouterIcon(key) {
      switch (key) {
        case 'study':
          return 'edu-icon-shu'
        case 'exam':
          return 'edu-icon-shitiguanli'
        case 'finance':
          return 'edu-icon-financetb'
        case 'interaction':
          return 'edu-icon-shejiao'
        case 'profile':
          return 'edu-icon-shezhi'
        case 'notify':
          return 'edu-icon-xiaoxi'
        case 'classes':
          return 'edu-icon-xueshengicon'
        default:
          return null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sign-text {
  font-size: 12px;
  text-align: center;
  @include edu-color-auxiliary;
}
.sign-btn {
  width: 68px;
}
.left-side {
  float: left;
  width: 270px;
  min-height: 400px;
  background: #fff;
  .header {
    margin: 0 28px 10px;
    padding: 20px 0;
    border-bottom: 1px solid #e4e7ed;
    .info {
      flex-direction: column;
      .name {
        font-size: 14px;
        font-weight: 400;
        color: $text-color-import;
        margin-top: 10px;
        cursor: pointer;
        i {
          display: block;
          width: 14px;
          height: 14px;
          margin-left: 2px;
          &.icon-vip {
            background-image: url(../../../assets/images/public/vip_icon.png);
          }
          &.icon-vipover {
            background-image: url(../../../assets/images/public/vip_grey_icon.png);
          }
        }
      }
    }
    .bottom {
      margin-top: 10px;
      .inte {
        font-size: 12px;
        font-weight: 400;
        color: $text-color-secondary;
      }
    }
  }
  .menu {
    .el-menu-item.is-active {
      @include edu-color-primary(background-color, 0.1);
    }
    .munu-nav {
      border-right: none;
      padding-bottom: 17px;
    }
    ::v-deep .el-scrollbar {
      height: 100%;
      .el-scrollbar__wrap {
        overflow-x: auto;
      }
    }
  }
}
</style>
